<template>
	<view v-if="loaded">
		<page-header :team-id="teamId" :disabled="false"></page-header>
		<page-body>
			<template v-slot:content>
				<uni-collapse ref="collapse" :accordion="false" v-model="collapseStates" @change="handleCollapseStateChange">
					<uni-collapse-item>
						<template v-slot:title>
							<uni-section :title="$t('defect.base-info')" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<view class="col padding-left20 padding-right20 padding-bottom40">
							<view class="row">
								<text class="cat2bug-label160">{{$t('project.name')}}</text>
								<text class="cat2bug-text">{{text(project.projectName)}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('project.introduction')}}</text>
								<text class="cat2bug-text">{{text(project.remark)}}</text>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item>
						<template v-slot:title>
							<uni-section :title="$t('project.icon')" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<view class="padding-left20 padding-right20 padding-bottom40">
							<preview-image show-type="solo" :image-urls="projectIcon(project)"></preview-image>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</template>
		</page-body>
		<project-tools show-type="fab" v-model="project"></project-tools>
	</view>
</template>

<script>
	import PreviewImage from '@/components/preview-image/index.vue'
	import config from '@/config'
	import { getProject } from "@/api/system/project.js"
	import {lifeTime} from "@/utils/defect";
	import ProjectTools from "@/subpackage/components/project/project-tools/index.vue"
	
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()
	
	/** 保存到本地缓存项目详情折叠面板状态的Key */
	const PROJECT_DETAIL_COLLAPSE_STATE_KEY = 'project-detail-collapse-state';
	
	export default {
		name: 'ProjectDetail',
		components: { PreviewImage, ProjectTools },
		data() {
			return {
				// 项目详情
				project: {},
				// 是否显示折叠面板的状态开关
				collapseStates: ['0', '1'],
			}
		},
		onLoad(option) {
			this.getProjectDetail(option.projectId);
		},
		onShow() {
			// 读取本地折叠面板的状态
			const self = this;
			uni.getStorage({
				key: PROJECT_DETAIL_COLLAPSE_STATE_KEY,
				success: function (res) {
					if(res.data) {
						self.collapseStates = res.data;
						self.$nextTick(() => {
							self.$refs.collapse.resize();
						});
					}
				}
			});
			
		},
		computed: {
			loaded: function() {
				return this.$i18n.locale?true:false;
			},
			/** 当前团队ID */
			teamId() {
			    return this.$store.state.user.config.currentTeamId;
			},
			/** 获取项目图标 */
			projectIcon: function() {
				return function(project) {
					const regex = /^(https?:\/\/[^\/?#:]+(?::\d+)?)/;
					const match = config.baseUrl.match(regex);
					const url = match ? match[1] : '';
					return project.projectIcon?[url + project.projectIcon]:[];
				}
			},
			text: function() {
				return function(val) {
					return val?val+'':this.$i18n.t('empty');
				}
			}
		},
		methods: {
			// 获取项目
			getProjectDetail(defectId) {
				getProject(defectId).then(res=>{
					this.project = res.data;
				})
			},
			/** 处理动态面板状态改变 */
			handleCollapseStateChange() {
				const self = this;
				this.$nextTick(()=>{
					uni.setStorage({
						key: PROJECT_DETAIL_COLLAPSE_STATE_KEY,
						data: self.collapseStates,
						success: function (res) {
							uni.getStorage({
								key: PROJECT_DETAIL_COLLAPSE_STATE_KEY,
								success: function (res) {
								}
							});
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-forms-item, .defect-item {
		padding: 0 40rpx;
	}
	.defect-item {
		margin-bottom: 20rpx;
		::v-deep .uni-link {
			word-break: break-word;
		}
	}
	.defect-form-text {
		height: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	::v-deep .uni-forms-item, .defect-item {
		padding: 0 40rpx;
	}
</style>